<template>
  <div class="relative w-screen h-screen bg-[#035ebe]">
    <div class="h-full flex flex-col absolute left-[50%] top-[50%] origin-top-left bg-cover bg-center" :style="style" style="z-index: 1;">
      <div class="relative z-10">
        <HomeHeader />
      </div>
      <div class="flex-1 overflow-y-scroll hide-scrollbar">
        <img src="@/assets/png/首页背景图.png" alt="Your Image" class="w-full h-full object-cover">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import HomeHeader from './components/HomeHeader.vue'
import useScale from './hooks/useScale';
import { computed } from 'vue';

// 目标屏幕
const screenOptions = {
  targetWidth: 1920, // 设计稿的宽度
  targetHeight: 1080 // 设计稿的高度
};
const { scale } = useScale(screenOptions);
const style = computed(() => ({
  width: `${screenOptions.targetWidth}px`,
  height: `${screenOptions.targetHeight}px`,
  transform: `scale(${scale.value}) translate(-50%, -50%)`
}));
</script>

<style scoped>
.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE和Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* WebKit浏览器 */
}

/* 确保背景图片的 div 有相对定位 */
.bg-cover {
  position: relative;
  z-index: 1;
}

/* 确保按钮的 div 有相对定位并设置较高的 z-index */
.relative {
  position: relative;
  z-index: 10;
}
</style>
